<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
    <style>
        :root{
            --w: 320px;
        }
        .user-list{
            --m:20px;
            width:calc( var(--w) * 3 + var(--m) * 2);
            display: flex;
            flex-wrap: wrap;
            margin:0 auto;
        }
        .user-card {
            width: var(--w);
            height: 130px;
            margin-right:var(--m);
            display: flex;
            flex-flow: row nowrap;
            box-shadow: 0px 0px 10px #999;
            border-radius: 6px;
        }
        .user-card:nth-child(3n){
            margin-right: 0px;
        }
        .user-card:nth-child(n+4){
            margin-top:var(--m) ;
        }
        .user-card .head {
            width: 120px;
            height: 130px;
            /* 禁止弹性盒子内中当前元素的缩放操作 */
            flex-shrink: 0;
        }

        .user-card .head img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 6px 0px 0px 6px;
            border-right: 1px solid #efefef;
            overflow: hidden;
        }

        .user-card .info {
            cursor: pointer;
            /* 提供动态宽度 */
            flex-grow: 1;
            /* 提供width属性，为单行隐藏完成必要条件定义 */
            width: 0px;
            /* width: 150px; */
            margin-left: 10px;
            margin-top: 10px;

            /* 字体的倍数 */
            line-height: 1.7;
        }

        .user-card .info .row {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 0px 10px;
        }

        .user-card .info .row span:first-child {
            display: inline-block;
            color: #999;
            width: 60px;

            /* 文字两端对齐 */
            text-align-last: justify;
        }
        .user-card .info .row span:last-child::before{
            content: ":";
            padding: 0px 8px 0px 4px;
        }

        .user-card .info .row:hover {
            position: relative;
            background-color: #000;
            color: white;
            border-radius: 8px;
            min-width: 80%;
            /* 按照内容填充 */
            width: fit-content;
            z-index: 99;
        }
    </style>
</head>
<body>
    <!-- <user-card></user-card> -->

    <div id="app">
        <pre v-pre class="note">
        组件概念
        1.组件化
            组件:可复用的 标签 实例，且带有一个自定义标签名字，项目中把组件作为自定义元素来使用;
                 具有固定的页面结构、样式、功能代码的特殊组合体。
            组件化:在利用组件技术实现的页面开发。
        2.从vue的语法角度出发-组件化开发
            vue组件:将页面结构、样式、功能使用vue语法进行组合封装,转换为vue的一个组件实例;
            vue组件化:以vue组件实例对应的自定义标签的组合方式，构成整个项目的完整结构，
                     或将特殊实现功能封装成组件进行特殊调用的过程，被叫做vue组件化。

        vue的组件定义语法
        1.局部组件定义：
            + 局部组件构建依赖于一个固定的 vue 实例配置，通过配置实例属性 components:{} 定义
            + 语法构成 components:{ name:definition,…… },
                      - name为自定义组件标签名
                      - definition 取值vue实例的配置描述【取值为Object数据】
                                   取值等同于 createApp(options) options配置

        2、全局组件定义
            + 全局组件定义的相关配置和使用方式等同于局部组件
            + 定义语法
                const app = Vue.createApp({/* ... */})
                app.component(name, definition)
                app.mount("#app");
        </pre>
        <div class="user-list">
            <user-card></user-card>
            <user-card></user-card>
            <user-card></user-card>
            <gloab-user-card></gloab-user-card>
            <gloab-user-card></gloab-user-card>
        </div>
    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data() {
                return {
                    
                }
            },
            // 局部组件定义
            components: {
                // vue不建议使用单个单词表示自定义组件标签名
                // 免跟现有的以及未来的 HTML 元素相冲突
                // user:{},
                // 在浏览器运行环境下，标签是忽略大小写的
                // "user-card":{}
                // vue定义时建议使用大驼峰进行标签名称描述，浏览器加载时因为忽略大小写，所以采用连字符定义，vue环境会自动转换
                UserCard:{
                    template:`
                        <div class="user-card">
                            <div class="head">
                                <img src="https://api.ixiaowai.cn/mcapi/mcapi.php" alt="">
                            </div>
                            <div class="info">
                                <div class="row">
                                    <span>编号:</span>
                                    <span>1</span>
                                </div>
                                <div class="row">
                                    <span>姓名:</span>
                                    <span>张三</span>
                                </div>
                                <div class="row">
                                    <span>性别:</span>
                                    <span>男</span>
                                </div>
                                <div class="row">
                                    <span>手机号:</span>
                                    <span>13838384381</span>
                                </div>
                            </div>
                        </div>
                    `,
                }
            },
        })

        app.component("GloabUserCard",{
            template:`
                <div class="user-card">
                    <div class="head">
                        <img src="https://api.ixiaowai.cn/mcapi/mcapi.php" alt="">
                    </div>
                    <div class="info">
                        <div class="row">
                            <span>编号:</span>
                            <span>1</span>
                        </div>
                        <div class="row">
                            <span>姓名:</span>
                            <span>张三</span>
                        </div>
                        <div class="row">
                            <span>性别:</span>
                            <span>男</span>
                        </div>
                        <div class="row">
                            <span>手机号:</span>
                            <span>13838384381</span>
                        </div>
                    </div>
                </div>
            `,
        })

        app.mount("#app")
    </script>
</body>
</html>